window.onload = function(){
	var curr = document.getElementById('curriculum');
	var oUl = curr.getElementsByTagName('ul')[0];
	var aLi = oUl.children;
	var oD = curr.getElementsByClassName('contact')[0];
	var close=curr.getElementsByClassName("close")[0];
	var back=oD.getElementsByTagName("a")[0];
	curr.addEventListener("webkitTransitionEnd",end,false);/*过渡时间 兼容模式*/
	curr.addEventListener("transitionend",end,false);
	curr.style.opacity = 1;
	
	function end(){
		this.removeEventListener("webkitTransitionEnd",end,false);/*过渡时间 兼容模式*/
		this.removeEventListener("transitionend",end,false);
		curr.style.top = '190px';
		curr.style.height = '230px';
		oUl.style.top = 0;
		for(var i=0; i<aLi.length;i++){
			aLi[i].style.opacity = 1;
			aLi[i].style.transform = "rotate(0)";
			aLi[i].style.webkitTransform = "rotate(0)";
			aLi[i].style.transition = ".5s "+(300+i*200)+"ms";
			aLi[i].style.transition = "rotateX(0deg)";
			aLi[i].style.WebkitTransform="rotateX(0deg)";
			aLi[i].off = true;
			aLi[i].index = i;
			aLi[i].onmouseover = over;
			aLi[i].onmouseout = function(){
				if(this.off){
					this.style.WebkitTransform="rotateY(0deg)";
				this.style.transform="rotateY(0deg)";
				}
			}
			aLi[i].onclick = fnclick;
		}
		
	}
	/*获取li左右位置*/
	function over(ev){
		if(this.off){
			var iX = ev.clientX-getLeft(this);
			this.style.transition="0.5s";
			if(iX>this.offsetWidth/2){
				this.style.WebkitTransform="rotateY(30deg)";
				this.style.transform="rotateY(30deg)";
			}
			else{
				this.style.WebkitTransform="rotateY(-30deg)";
				this.style.transform="rotateY(-30deg)";
			}
		}
	}
	/*获取定位元素位置*/
	function getLeft(obj){
		var iLeft=0;
		while(obj){
			iLeft+=obj.offsetLeft;
			obj=obj.offsetParent;
		}
		return iLeft
	}
	/*点击*/
	function fnclick(ev){
		var iX=ev.clientX-getLeft(this);
		var iDeg=iX>this.offsetWidth/2?-180:180;
		var iMax=0;
		var iNow=0;
		oD.style.display="block";
		for(var i=0;i<aLi.length;i++)
		{
			if(iMax<Math.abs(i-this.index))
			{
				iMax=Math.abs(i-this.index);
				iNow=i;
			}
			aLi[i].off=false;
			aLi[i].style.transition="0.5s "+Math.abs(i-this.index)*100+"ms cubic-bezier(0.115, -0.195, 0.255, -0.280)";
			aLi[i].style.WebkitTransform="rotateY("+iDeg+"deg)";
			aLi[i].style.transform="rotateY("+iDeg+"deg)";
			aLi[i].style.opacity=0.1;
		}
		aLi[iNow].addEventListener("webkitTransitionEnd",end,false);
		aLi[iNow].addEventListener("transitionend",end,false);
		function end()
		{
			this.removeEventListener("webkitTransitionEnd",end,false);
			this.removeEventListener("transitionend",end,false);
			oD.style.opacity=1;
		}
	}
	/*返回*/
	back.onclick = function(){
		oD.style.opacity=0;
		oD.addEventListener("webkitTransitionEnd",end,false);
		oD.addEventListener("transitionend",end,false);
		function end()
		{
			this.removeEventListener("webkitTransitionEnd",end,false);
			this.removeEventListener("transitionend",end,false);
			for(var i=0;i<aLi.length;i++)
			{
				aLi[i].off=true;
				aLi[i].style.transition="0.5s "+(aLi.length-i-1)*100+"ms";
				aLi[i].style.WebkitTransform="rotateY(0deg)";
				aLi[i].style.transform="rotateY(0deg)";
				aLi[i].style.opacity=1;
			}	
		}
	}
	/*close*/
	close.onclick = function(){
		curr.style.transition=".8s height,.6s top,0.4s opacity .2s";
		curr.style.height = "40px";
		curr.style.top = "320px";
		curr.style.opacity = 0;
		
	}
}